import React, {Component} from 'react';
import module from 'lib/module';

@module
class A12 extends Component{
    constructor() {
        super();
        this.state = {
            num: 1
        }
    }

    addNum = async ()=> {
        await this.setStateAsync({
            num: this.state.num + 1
        });
        console.log('add', this.state.num);
    }

    minusNum = async ()=> {
        await this.setStateAsync({
            num: this.state.num - 1
        });
        console.log('minus', this.state.num);

    }

    addNumSync = ()=> {
        this.setState({
            num: this.state.num + 1
        });
        console.log('add', this.state.num);
    }

    minusNumSync = ()=> {
        this.setState({
            num: this.state.num - 1
        });
        console.log('minus', this.state.num);
    }

    render() {
        let {num} = this.state;
        return (
        <div>
            <span>a12</span>
            <div>
                <h3>async</h3>
                <button onClick={this.addNum}>+</button>
                <span>{num}</span>
                <button onClick={this.minusNum}>-</button>
            </div>
            <div>
                <h3>sync</h3>
                <button onClick={this.addNumSync}>+</button>
                <span>{num}</span>
                <button onClick={this.minusNumSync}>-</button>
            </div>
        </div>)
    }
}

export default A12;
